import React, { Component } from 'react'
import {
  Card,
  Table,
  Button,
  Icon,
  message,
  Modal
} from 'antd'

import { reqCategories, reqUpdateCategory, reqAddCategory, reqRemoveCategory } from '../../api'
import LinkButton from '../../components/LinkButton'
import AddForm from './add-form'
import UpdateForm from './update-form'

const { confirm } = Modal

// 商品分类路由
export default class Categories extends Component {
  state = {
    categories: [], // 一级分类列表
    subCategories: [], // 二级分类列表
    isLoading: false, // 是否正在获取数据
    parentId: '0', // 当前需要显示的分类列表的 parentId
    parentName: '', // 当前需要显示的分类列表的 parentName
    showStatus: 0, // 表示添加 / 更新的确认框是否显示, 0: 都不显示, 1: 显示, 2: 隐藏
  }

  initColumns = () => {
    this.initColumns = [
      {
        title: '分类的名称',
        dataIndex: 'name', // 显示数据的属性名
      },
      {
        title: '操作',
        render: (category) => ( // 返回需要显示的界面标签
          <span>
            <LinkButton onClick={() => this.showUpdate(category)}>修改分类</LinkButton>
            {this.state.parentId === '0' ? <LinkButton onClick={() => this.showSubCategories(category)}>查看子分类</LinkButton> : null}
            <LinkButton style={{color: '#ff4d4feb'}} onClick={() => this.removeCategory(category)}>删除分类</LinkButton>
          </span>
        ),
        width: 300
      }
    ]
  }

  /*
  * 异步获取一级 / 二级分类列表显示
  * id: 如果没有指定根据状态中的 parentId 请求, 如果指定了根据指定的请求
  * */
  getCategories = async (parentId) => {
    // 在发请求之前显示 loading
    this.setState({ isLoading: true })
    parentId = parentId || this.state.parentId
    // 发送异步ajax请求, 获取数据
    const result = await reqCategories(parentId)
    // 在请求完成后, 隐藏 loading
    this.setState({ isLoading: false })
    if (result.status === 0) {
      // 取出分类数组(可能是一级也可能是二级的)
      const categories = result.data

      if (parentId === '0') {
        // 更新一级分类状态
        this.setState({
          categories,
        })
      } else {
        // 更新二级分类状态
        this.setState({
          subCategories: categories,
        })
      }
    } else {
      message.error('获取分类列表失败')
    }
  }

  // 显示指定一级分类的二级分类列表
  showSubCategories = (category) => {
    console.log(category)
    // 更新状态
    this.setState({
      parentId: category._id,
      parentName: category.name
    }, () => { // 在状态更新且重新 render() 后执行
      console.log('parentId', this.state.parentId) // '0'
      // 获取二级分类列表显示
      this.getCategories()
    })
  }

  // 显示指定一级分类列表
  showCategories = () => {
    // 更新为一级列表显示状态
    this.setState({
      parentId: '0',
      parentName: '',
      subCategories: []
    })
  }

  // 响应点击取消: 隐藏确定框
  handleCancel = () => {
    // 清除输入数据
    this.form.resetFields()
    // 隐藏确定框
    this.setState({
      showStatus: 0
    })
  }

  // 显示添加的确认框
  showAdd = () => {
    this.setState({
      showStatus: 1
    })
  }

  // 添加分类
  addCategory = () => {
    // 进行表单验证, 通过了才处理
    this.form.validateFields(async (err, values) => {
      if (!err) {
        // 1. 隐藏确认框
        this.setState({
          showStatus: 0
        })

        // 2. 收集数据, 发送请求添加分类
        const { parentId, categoryName} = values
        const result = await reqAddCategory(parentId, categoryName)
        // 清除输入数据
        this.form.resetFields()
        if (result.status === 0) {
          //添加的分类就是当前分类列表下的分类
          if (parentId === this.state.parentId) {
            // 3. 重新获取当前分类列表显示
            this.getCategories()
          } else if (parentId === '0') {
            // 在二级分类列表下添加一级分类, 重新获取二级分类列表, 不需要显示一级分类列表
            this.getCategories('0')
          }
        }
      }
    })
  }

  // 显示修改的确认框
  showUpdate = (category) => {
    // 保存分类对象
    this.category = category
    this.setState({
      showStatus: 2
    })
  }

  // 更新分类
  updateCategory = () => {
    // 进行表单验证, 通过了才处理
    this.form.validateFields(async (err, values) => {
      if (!err) {
        // 1. 隐藏确认框
        this.setState({
          showStatus: 0
        })

        // 2. 收集数据, 发送请求更新分类
        const categoryId = this.category._id
        const { categoryName } = values
        // 清除输入数据
        this.form.resetFields()
        const result = await reqUpdateCategory(categoryId, categoryName)
        if (result.status === 0) {

          // 3. 重新显示列表
          this.getCategories()
        }
      }
    })
  }

  // 删除分类(根据 _id)
  removeCategory = (category) => {
    const { _id, name } = category

    // 1 显示对话框提示
    confirm({
      title: `确认删除 ${name} 分类吗?`,
      okText: '确定',
      okType: 'danger',
      cancelText: '取消',
      onOk: async () => {
        // 2. 准备数据, 发送请求删除分类
        const result = await reqRemoveCategory(_id)
        // 提示删除成功
        message.success('删除成功')

        // 3. 重新显示当前分类数据
        if (result.status === 0) {
          this.getCategories()
        }
      },
      onCancel() {
        // console.log('Cancel')
      },
    })
  }

  componentWillMount () {
    // 初始化 Table 所有列的数组
    this.initColumns()
  }

  componentDidMount () {
    // 异步获取一级分类列表显示
    this.getCategories()
  }

  render () {
    const { categories, subCategories, parentId, parentName, isLoading, showStatus } = this.state
    // 读取指定的分类
    const category = this.category || {} // 如果没有指定空对象

    // card 左侧标题
    const title = parentId === '0' ? '一级分类列表' : (
      <span>
        <LinkButton onClick={this.showCategories}>一级分类列表</LinkButton>
        <Icon type='arrow-right' style={{marginRight: 5}} />
        <span>{ parentName }</span>
      </span>
    )
    // card 右侧按钮
    const extra = (
      <Button type='primary' onClick={this.showAdd}>
        <Icon type='plus' />
        添加
      </Button>
    )

    return (
      <Card title={title} extra={extra}>
        <Table
          bordered={true}
          loading={isLoading}
          rowKey='_id'
          dataSource={parentId === '0' ? categories : subCategories}
          columns={this.initColumns}
          pagination={{ defaultPageSize: 5, showQuickJumper: true }}
        />
        <Modal
          title="添加分类"
          visible={showStatus === 1}
          onOk={this.addCategory}
          onCancel={this.handleCancel}
        >
          <AddForm
            categories={categories}
            parentId={parentId}
            setForm={(form) => this.form = form}/>
        </Modal>
        <Modal
          title="更新分类"
          visible={showStatus === 2}
          onOk={this.updateCategory}
          onCancel={this.handleCancel}
        >
          <UpdateForm
            categoryName={category.name}
            setForm={(form) => this.form = form} />
        </Modal>
      </Card>
    )
  }
}
